<!DOCTYPE html>
<html>
  <head>
    <title>{% if page.title %}{{ page.title }} – {% endif %}{{ site.name }} – {{ site.description }}</title>

    {% include meta.html %}
    {% seo %}
    <!--[if lt IE 9]>
      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="shortcut icon" type="image/png" href="/images/fav.png">
    <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/style.css" />
    <link rel="alternate" type="application/rss+xml" title="{{ site.name }} - {{ site.description }}" href="{{ site.baseurl }}/feed.xml" />
    <script type="text/javascript" async
      src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-MML-AM_CHTML">
    </script>
    <!-- Created with Jekyll Now - http://github.com/barryclark/jekyll-now -->
  </head>

  <body>
    <div class="wrapper-masthead">
      <div style="position: fixed; right: 50px; bottom: 50px" 
        id="theme-toggle" onclick="modeSwitcher()" 
        class="darkmode-toggle">
        🌓
      </div>
      <div class="container">
        <header class="masthead clearfix">
          <a href="{{ site.baseurl }}/" class="site-avatar"><img src="{{ site.avatar }}" /></a>

          <div class="site-info">
            <h1 class="site-name"><a href="{{ site.baseurl }}/">{{ site.name }}</a></h1>
            <p class="site-description">{{ site.description }}</p>
          </div>

          <nav>
            <a href="{{ site.baseurl }}/">博客</a>
            <a href="{{ site.baseurl }}/category/">分类</a>
            <a href="{{ site.baseurl }}/tags/">标签</a>
            <a href="{{ site.baseurl }}/about">作者</a>
          </nav>
        </header>
      </div>
    </div>

    <div id="main" role="main" class="container">
      {{ content }}
    </div>

    <div class="wrapper-footer">
      <div class="container">
        <footer class="footer">
          {% include svg-icons.html %}
        </footer>
      </div>
    </div>

    {% include analytics.html %}
  </body>
  <script>
    // this checks whether system dark mode is set 
    let systemInitiatedDark = window.matchMedia("(prefers-color-scheme: dark)"); 
    // this checks for session storage telling to override
    // the system preferences 
    let theme = sessionStorage.getItem('theme');
    console.log('thiem', systemInitiatedDark, theme)

    function prefersColorTest(systemInitiatedDark) {
      if (systemInitiatedDark.matches) {
        document.documentElement.setAttribute('data-theme', 'dark');		
        document.getElementById("theme-toggle").className = 'darkmode-toggle darkmode-toggle--white';
        // this clears the session storage 
        sessionStorage.setItem('theme', '');
      } else {
        document.documentElement.setAttribute('data-theme', 'light');
        document.getElementById("theme-toggle").className = 'darkmode-toggle';
        sessionStorage.setItem('theme', '');
      }
    }
    systemInitiatedDark.addListener(prefersColorTest);

    function modeSwitcher() {
    // it's important to check for overrides again 
      let theme = sessionStorage.getItem('theme');
      // checks if reader selected dark mode 
      if (theme === "dark") {
        document.documentElement.setAttribute('data-theme', 'light');
        sessionStorage.setItem('theme', 'light');
        document.getElementById("theme-toggle").className = 'darkmode-toggle';
        // checks if reader selected light mode 
      }	else if (theme === "light") {
        document.documentElement.setAttribute('data-theme', 'dark');
        sessionStorage.setItem('theme', 'dark');
        document.getElementById("theme-toggle").className = 'darkmode-toggle darkmode-toggle--white';
        // checks if system set dark mode 
      } else if (systemInitiatedDark.matches) {	
        document.documentElement.setAttribute('data-theme', 'light');
        sessionStorage.setItem('theme', 'light');
        document.getElementById("theme-toggle").className = 'darkmode-toggle';
        // the only option left is system set light mode
      } else {
        document.documentElement.setAttribute('data-theme', 'dark');
        document.getElementById("theme-toggle").className = 'darkmode-toggle darkmode-toggle--white';
        sessionStorage.setItem('theme', 'dark');
      }
    }

    if (theme === "dark") {
      document.documentElement.setAttribute('data-theme', 'dark');
      document.getElementById("theme-toggle").className = 'darkmode-toggle darkmode-toggle--white';
      sessionStorage.setItem('theme', 'dark');
    } else if (theme === "light") {
      document.documentElement.setAttribute('data-theme', 'light');
      document.getElementById("theme-toggle").className = 'darkmode-toggle';
      sessionStorage.setItem('theme', 'light');
    }
  </script>
</html>
